// You custom settings file to override Foundation defaults
@import "settings";

// Comment out this import if you are customizing you imports below
@import "foundation";

// ----------------------------------------
// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing

// @import "compass/css3";
// @import "foundation/settings";
// @import "foundation/functions/all";

// Control which mixins you have access too

// @import "foundation/mixins/clearfix";
// @import "foundation/mixins/css-triangle";
// @import "foundation/mixins/font-size";

// Must include next two for semantic grid to work

// @import "foundation/mixins/respond-to";
// @import "foundation/mixins/semantic-grid";

// @import "modular-scale";
// @import "foundation/common/globals";

// Must include the grid for any responsiveness

// @import "foundation/components/grid";

// Control which common styles get compiled

// @import "foundation/common/typography";
// @import "foundation/common/forms";

// Control which components you get if customizing

// @import "foundation/components/modules/buttons";
// @import "foundation/components/modules/tabs";
// @import "foundation/components/modules/ui";
// @import "foundation/components/modules/topbar";
// @import "foundation/components/modules/navbar";
// @import "foundation/components/modules/orbit";
// @import "foundation/components/modules/reveal";
// @import "foundation/components/modules/offcanvas";
@import "../images/sprites/icons/*.png";
//@import url(http://fonts.googleapis.com/css?family=Coming+Soon);
//@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body { background: url('../images/bg.jpg') repeat; }
h1, h2, h3, h4, h5, h6, label { 
    font-family: 'Coming Soon', cursive;
    //font-family: 'Open Sans Condensed', sans-serif;
    //text-shadow: 1px 1px 1px white;
}
header#homepage {
    background: url("../images/header.png") center bottom no-repeat;
    padding: 5px 0 262px;
    /*With breadcrum*/
    //margin: 85px 0 30px 0;
    /*Without breadcrum*/
    margin: 60px 0 30px 0;
    h2 {
        font-size: 25px;
    }
}
#services {
    h4 {
        font-size: 20px;
    }
    .panel {
        min-height: 312px;
        background-color: rgba(0, 0, 0, 0.03);
        border-top: 1px solid rgba(0, 0, 0, 0.03);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset, 0 -1px 0 rgba(255, 255, 255, 0.25);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        .pic {
            width: 183px;
            height: 60px;
            margin-bottom: 10px;
            &.frontend {
                @include icons-sprite(front-end);
                display: block;
            }
            &.cms {
                @include icons-sprite(cms);
                display: block;
            }
            &.ecommerce {
                @include icons-sprite(ecommerce);
                display: block;
            }
            &.mobile {
                @include icons-sprite(responsive-design); 
            }
        }
    }
}
#service-skills-contact {
    h4, h5, label {
        //text-shadow: 1px 1px 1px white;
        text-shadow: 1px 1px 1px white; 
    }
    label {
        font-weight: bold;
    }
    ul li, label, h4, h5 {
        color: black;
    }
    a {
        color: black;
        &:hover {
            text-decoration: underline;
        }
    }
    .top { 
        background: url("../images/footer_top.png") repeat-x;
        height: 38px;
    }
    .bottom { 
        background: url("../images/footer_bottom.png") repeat-x;  
        height: 38px;
    }
    .container {
        display: none;
        background: url("../images/footer_bg.png") repeat;
        fieldset {
            border: none;
            
            .hire-me {
                @include icons-sprite(hire-me);
                text-indent: -999em;
                width: 20px;
                height: 21px;
            }
            
        }
    }
}
#footer {
    .top { 
        background: url("../images/footer_top.png") repeat-x;  
        height: 40px;
    }
    .bottom { 
        background: url("../images/footer_bottom.png") repeat-x;  
        height: 40px;
    }
    footer {
        background: url("../images/footer_bg.png") repeat;
        padding-top: 10px;
        p {
            padding: 0;
            margin: 0;
        }
        .facebook-icon {
            @include icons-sprite(facebook);
            text-indent: -999em;
            width: 22px;
            height: 23px;
            margin: 10px 0 10px 0;
        }
        .twitter-icon {
            @include icons-sprite(twitter);
            text-indent: -999em;
            width: 28px;
            height: 22px;
            margin: 10px 0 10px 0;
        }
        .gplus-icon {
            @include icons-sprite(gplus);
            text-indent: -999em;
            width: 22px;
            height: 23px;
            margin: 10px 0 10px 0;
        }
    }
}

#social-media {
    .row {
        .columns {
            height: 20px;
        }
    }
    .addthis_button_linkedin_counter {
        width: 130px;
    }
}

#blog {
    margin: 60px 0 0 0;
}

.text-overflow {
    white-space: normal;
    width: 100%;
    height: 227px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
    //background: white;
    //border: solid 1px #E6E6E6;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset, 0 -1px 0 rgba(255, 255, 255, 0.25);
}

/* Very large screens */
@media only screen and (min-width: 1441px) { }

/* Medium screens */
@media only screen and (max-width: 1279px) and (min-width: 768px) { }

/* Small screens */
@media only screen and (max-width: 767px) {
    h1 {
        font-size: 37px;
    }
    
    header#homepage {
        background-size: auto 130px;
        padding-bottom: 145px;
        h2 {
            font-size: 20px !important;
        }
    }
    #services {
        h4 {
            font-size: 22px;
        }
        .panel {
            min-height: 0px;
        }
    }
    #social-media {
        .addthis_button_linkedin_counter {
            width: auto;
        }
    }
}
/* Landscape Orientation */
@media screen and (orientation: landscape) {}
/* Portrait Orientation */
@media screen and (orientation: portrait) {}
/* Touch Detection */
.touch .your-class {}